<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>wsblog</title>
    <style type="text/css">

body{
    background-image: url(img/bgimg.jpg);
    margin: 0px;
}
#head {
    width: 100%;
    height: 150px;

    border-width: 0;
    position: relative;
}
#head #headfont{
    position: absolute;
    left: 10%;
    font-size: 80px;
    top: 20px;
    margin: 0px;
    opacity: 0.8;
    color: white;
    font-family: sans-serif;
    font-weight: bolder;
    display: block;
    text-decoration: none;
}
#head #headdesc {
    position: absolute;
    left: 10%;
    top: 100px;
    color: white;
    margin: 0px;

    font-size: 20px;

}

        #navigationbar{
            position: relative;
            background-color: #222222;
            width: 100%;
            height: 60px;
            box-shadow: 0px 0px 3px black;
        }

        #navigationbar ul{
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            position: absolute;
            left: 50px;


        }

        #navigationbar a{
            text-decoration: none;
            color: #F0F8FF;
            display: block;
            width: 150px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            outline: none;
        }

        #navigationbar a:hover{
            background-color: black;
            box-shadow: 0px 0px 5px black;
        }



        #navigationbar li{
            float: left;

        }


        #content{
            position: relative;
            width: 100%;
            /*min-height: 200px;*/
            margin-top: 0px;
            background-color: #262626;
        }

        #content #contentblock{
            margin-left: 15%;
            margin-right: 15%;
            margin-top: 0;
            margin-bottom: 0;

            /*min-height: 200px;*/
            width: 70%;
            color: #FEFEFE;



        }

        #content #wrap{
            margin-left: 5%;
            margin-top: 0px;
            width: 90%;
            padding-top: 40px;
            padding-bottom: 40px;
        }


        .dropdcontent{
            display: none;
            position: absolute;
            background-color: #222222;
            width: 150px;
            z-index: 1;

        }

        .dropdcontent a{
            color: #FEFEFE;
            font-size: 20px;
            width: 100%;
            text-decoration: none;
            display: block;
        }

        .dropdcontent a:hover{
            background-color: #262626;
        }

        #desktopli:hover #dtpage,
        #mobileli:hover #mbpage,
        #webdevli:hover #webdpage,
        #programeli:hover #plpage{
            display: block;
        }

        #foot{
            background-color: #262626;
            position: relative;
            width: 100%;
            height: 100px;
            margin: 0px;

            z-index: -1;
        }
        #foot p{
            color: #FEFEFE;
            position: absolute;
            left: 15%;
            width: 70%;
            text-align: center;

        }
        .picbox{
            height:300px;
            width: 400px;
            float: left;
        }

        .picbox img{
            height: 100%;
        }

    </style>
</head>
<body>

<div id="head">
    <a id="headfont" href="index.html">wsblog</a>
    <p id="headdesc">闷 声 发 大 财</p>
</div>
<div id="navigationbar">
    <ul>
        <li><a id="mainpage" href="index.html">首页</a></li>
        <li id="desktopli">
            <a id="desktop" href="index.html">桌面开发</a>
            <div class="dropdcontent" id="dtpage">
                <a href="index.html">Windows</a>
                <a href="index.html">Linux</a>
                <a href="index.html">OS X</a>
            </div>

        </li>
        <li id="mobileli">
            <a id="mobile" href="index.html">移动开发</a>
            <div class="dropdcontent" id="mbpage">
                <a href="index.html">Android</a>
                <a href="index.html">IOS</a>
                <a href="index.html">UWA</a>
            </div>
        </li>
        <li id="webdevli">
            <a id="webdev" href="index.html">网络开发</a>
            <div class="dropdcontent" id="webdpage">
                <a href="index.html">前端</a>
                <a href="index.html">后台</a>
            </div>
        </li>
        <li id="programeli">
            <a id="programelang" href="index.html">编程语言</a>
            <div class="dropdcontent" id="plpage">
                <a href="index.html">C/C++</a>
                <a href="index.html">Java</a>
                <a href="index.html">Python</a>
                <a href="index.html">其他</a>
            </div>
        </li>
        <li><a id="about" href="index.html">关于博客</a></li>
    </ul>


</div>

<div id="content">
    <div id="contentblock">
        <div id="wrap">
            <div id="album">
                <div class="picbox">
                    <a href="index.html">
                        <img src="img/pic01.jpg"></img>
                    </a>
                </div>
                <div class="picbox">
                    <a href="index.html">
                        <img src="img/pic02.jpg"></img>
                    </a>
                </div>
                <div class="picbox">
                    <a href="index.html">
                        <img src="img/pic03.jpg"></img>
                    </a>
                </div>
                <div class="picbox">
                    <a href="index.html">
                        <img src="img/pic04.jpg"></img>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="foot">
    <p>Power by wsgalaxy.<br/>
    Copyright©2017-2099.All Rights Reserved.</p>
</div>

</body>
</html>